<template>
  <div class="home">
    <section class="container-main-header">
      <section class="header-left">
        <i class="el-icon-menu" @click="asideFlex"></i>
        <span style="color: #97a8be;">首页</span>
      </section>
      <section class="header-right">
        <i class="el-icon-pear" @click="leaveHandle"></i>
      </section>

    </section>
    <section class="container-main-content">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content">
            <div class="grid-title-bg">后台项目</div>
            <div class="address-content">mall</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">
            <div class="grid-title-bg">前端项目</div>
            <div class="address-content">mall-admin-web</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">
            <div class="grid-title-bg">学习教程</div>
            <div class="address-content">mall-learning</div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content total-box">
            <i class="el-icon-s-order"></i>
            <div>
              <p>今日订单总数</p>
              <p>200</p>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content total-box">
            <i class="el-icon-s-data"></i>
            <div>
              <p>今日销售总额</p>
              <p>￥5000.00</p>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content total-box">
            <i class="el-icon-s-flag"></i>
            <div>
              <p>昨日销售总额</p>
              <p>￥5000.00</p>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="el-code_body">
        <div class="erweima">
          <img src="../assets/imgs/shoukuanma.jpg" alt />
        </div>
        <p style="text-align:center;">各位大佬,求打赏<br>/(ㄒoㄒ)/~~</p>
      </div>
      <el-row>
        <el-col :span="24">
          <div class="grid-content">
            <div class="un-handle-title">待处理事务</div>
            <div class="un-handle-content">
              <div class="un-handle-item">
                <span>待付款订单</span>
                <i>(10)</i>
              </div>
              <div class="un-handle-item">
                <span>已完成订单</span>
                <i>(10)</i>
              </div>
              <div class="un-handle-item">
                <span>待确认收货订单</span>
                <i>(10)</i>
              </div>
              <div class="un-handle-item">
                <span>待发货订单</span>
                <i>(10)</i>
              </div>
              <div class="un-handle-item">
                <span>新缺货登记</span>
                <i>(10)</i>
              </div>
              <div class="un-handle-item">
                <span>待处理退款申请</span>
                <i>(10)</i>
              </div>
              <div class="un-handle-item">
                <span>已发货订单</span>
                <i>(10)</i>
              </div>
              <div class="un-handle-item">
                <span>待处理退货订单</span>
                <i>(10)</i>
              </div>
              <div class="un-handle-item">
                <span>广告位即将到期</span>
                <i>(10)</i>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content">
            <div class="layout-title">商品总览</div>
            <div class="layout-content">
              <el-row class="layout-num">
                <el-col :span="6">
                  <div class="grid-content bg-purple-light text-color-red">100</div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple-light text-color-red">40</div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple-light text-color-red">50</div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple-light text-color-red">500</div>
                </el-col>
              </el-row>
              <el-row class="layout-text">
                <el-col :span="6">
                  <div class="grid-content bg-purple-light">已下架</div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple-light">已上架</div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple-light">库存紧张</div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple-light">全部商品</div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content">
            <div class="layout-title">用户总览</div>
            <div class="layout-content">
              <el-row class="layout-num">
                <el-col :span="6">
                  <div class="grid-content bg-purple-light text-color-red">100</div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple-light text-color-red">200</div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple-light text-color-red">1000</div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple-light text-color-red">5000</div>
                </el-col>
              </el-row>
              <el-row class="layout-text">
                <el-col :span="6">
                  <div class="grid-content bg-purple-light">今日新增</div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple-light">昨日新增</div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple-light">本月新增</div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple-light">会员总数</div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </section>
  </div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  name: "Home",
  props: {
    msg: String,
  },
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {tokenStr:window.sessionStorage.getItem("token")};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    asideFlex(){

    },
    leaveHandle(){
      var n = confirm("是否退出登录");
      if(n==true){
        window.sessionStorage.clear()
        location.reload()
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.container-main-header {
  padding: 0 20px;
  align-items: center;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}
.el-icon-menu {
  margin-right: 20px;
  font-size: 20px;
  cursor:pointer;
}
.el-icon-pear {
  font-size: 24px;
  cursor:pointer;
}
.container-main-content {
  margin: 40px auto 0;
  width: 1080px;
  padding: 20px;
  position: relative;
}
.el-row {
  margin-bottom: 20px;
}
.grid-content {
  border: 1px solid #ccc;
}
.address-content {
  font-weight: bold;
  color: #409eff;
  cursor: pointer;
}
.grid-title-bg {
  background: #d3dce6;
  height: 48px;
  line-height: 48px;
  padding-left: 20px;
  font-weight: bold;
}
.address-content {
  height: 60px;
  line-height: 60px;
  padding-left: 20px;
}
.total-box {
  display: flex;
  align-items: center;
  padding: 20px;
}
.total-box i {
  color: #ccc;
  margin-right: 10px;
  font-size: 40px;
}
.total-box p {
  line-height: 26px;
  text-align: left;
}
.el-code_body {
  width: 250px;
  height: 235px;
  padding: 25px;
  position: absolute;
  top: 20px;
  right: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.erweima {
  width: 188px;
  height: 154px;
  padding: 10px;
  text-align: center;
}
.erweima img {
  width: 80%;
}
.el-code_body p {
  text-align: left;
}
.un-handle-title {
  height: 50px;
  padding: 15px 20px;
  background: #d3dce6;
  font-weight: bold;
}
.un-handle-content {
  height: 160px;
  padding: 20px 40px;
  display: flex;
  flex-wrap: wrap;
}
.un-handle-item {
  height: 40px;
  padding: 10px;
  width: 32%;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  margin-right: 10px;
}
.un-handle-item:nth-child(3n) {
  margin: 0;
}
.un-handle-item i {
  color: #f56c6c;
  font-style: normal;
}
.layout-title {
  height: 50px;
  padding: 15px 20px;
  font-weight: bold;
  background-color: #d3dce6;
}
.layout-content {
  height: 140px;
  padding: 40px;
}
.bg-purple-light {
  border: none;
  height: 24px;
  line-height: 24px;
  padding: 0;
  margin: 0;
  background: #fff;
}
.layout-num {
  margin: 0;
}
.layout-text {
  margin: 0;
  margin-top: 10px;
}
.text-color-red {
  color: #f56c6c;
  padding-left: 5px;
  font-size: 24px;
}
</style>